<template>
	<view :class="[device.lang,'c_box']">
		<view class="head rtl bar-h bg_fff">
			<view class="view_head">
				<view class="" @click="Back">
					<uv-icon name="arrow-left" size="18" color="#707070"></uv-icon>
				</view>
				<view class=""> {{t("Store&Address")}} </view>
				<view class="">
					<!-- <uv-icon name="search" size="38"></uv-icon> -->
				</view>
			</view>
		</view>
		<view class="address_box rtl">
			<view class="addredd_img" @click="upImage">
				<image src="/static/images/a.png" mode="aspectFit"></image>
			</view>
			<view class="address_from">
				<view class="address_input" style="margin-bottom: 80rpx">
					<view class="label"> {{t("Store Name")}} </view>
					<view class="input_center">
						<input class="content" v-model="addressInfo.StoreName" type="text" placeholder="Store Name"
							placeholder-class="content-placeholder" />
					</view>
				</view>
				<view class="address_input">
					<view class="label">{{t("Name")}}</view>
					<view class="input_center">
						<input class="content" v-model="addressInfo.name" type="text" placeholder="Name"
							placeholder-class="content-placeholder" />
					</view>
				</view>
				<view class="address_input">
					<view class="label"> {{t("phone")}} </view>
					<view class="input_center">
						<input class="content" type="text" v-model="addressInfo.phone" placeholder="phone"
							placeholder-class="content-placeholder" />
					</view>
				</view>
				<view class="address_input">
					<view class="label"> {{ t("address") }} </view>
					<view class="input_center">
						<textarea class="content" v-model="addressInfo.address" placeholder="address"
							placeholder-class="content-placeholder"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="save rtl">
			<view class="save-text" @click="Save"> {{t("Save")}} </view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	import {
		useI18n
	} from "vue-i18n";
	import {
		useDeviceStore
	} from "@/store/modules/device"
	const device = useDeviceStore()
	const addressInfo = ref({
		StoreName: "",
		name: "",
		phone: "",
		address: ""
	})
	const {
		t
	} = useI18n();
	onMounted(() => {
		let address = uni.getStorageSync("address");
		if (address) {
			addressInfo.value = address;
		}
	})

	const upImage = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function(res) {
				console.log(JSON.stringify(res.tempFilePaths));
			}
		});
	}

	function validateString(str) {
		const regex1 = /05\d{8}$/; // 05开头，后面跟8个数字，总共10位
		const regex2 = /5\d{8}$/; // 5开头，后面跟8个数字，总共9位

		return regex1.test(str) || regex2.test(str);
	}
	const Save = () => {

		if (!addressInfo.value.StoreName) {
			return uni.showToast({
				title: t("Please enter a StoreName"),
				icon: "none"
			})
		}
		if (!addressInfo.value.name) {
			return uni.showToast({
				title: t("Please enter a name"),
				icon: "none"
			})
		}
		if (!addressInfo.value.phone) {
			return uni.showToast({
				title: t("The phone number is incorrect"),
				icon: "none"
			})
		}
		if (!validateString(addressInfo.value.phone)) {
			return uni.showToast({
				title: t("The phone number is incorrect"),
				icon: "none"
			})
		}
		if (!addressInfo.value.address) {
			return uni.showToast({
				title: t("Please enter the address"),
				icon: "none"
			})
		}

		uni.setStorageSync("address", addressInfo.value);
		uni.showToast({
			title: t("Successfully saved")
		})
		setTimeout(Back, 2000)
		// Back()
	}
	const Back = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	@import "@/static/css/index.scss";

	.c_box {
		display: flex;
		flex-direction: column;
	}

	.head {
		// background: #127B56;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 0 10rpx #ccc;

		.view_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 0 0 20rpx 20rpx;
			padding: 40rpx 20rpx;
			font-size: 28rpx;
		}

		.head_select {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 20rpx;

			.select_item {
				width: 45%;
				border: 1px solid #fff;
				border-radius: 10rpx;
				padding: 5rpx 10rpx;
				color: #fff;
				position: relative;

				.select_icon {
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.address_box {
		padding-bottom: 120rpx;
		margin-top: 20rpx;
		flex: 1;
		overflow-y: scroll;

		.addredd_img {
			display: flex;
			justify-content: center;
		}

		.address_from {
			margin: 0 20rpx;

			.address_input {
				border: 1px solid #ccc;
				border-radius: 10rpx;
				background: #fff;
				padding: 10rpx;
				display: flex;
				margin-top: 20rpx;

				.label {
					height: 30rpx;
					font-size: 24rpx;
					width: 180rpx;
				}

				.input_center {
					flex: 1;
					box-sizing: border-box;

					.content {
						padding-top: 30rpx;
						padding-left: 20rpx;
						max-height: 120rpx;
						// text-align: center;
						// width: 100%;
						// box-sizing: border-box;
					}

					.content-placeholder {
						font-size: 26rpx;
					}
				}
			}
		}
	}

	.save {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 20rpx 20rpx 0 0;
		background: $primary-b;
		color: #fff;
	}
</style>